<template>
  <div class="user">
    <div class="user-header">
      <div class="user-header-info">
        <div class="uhi-image">
          <img :src="userInfo.avatar || userImg" />
          <!-- <img src="@/assets/start.png" /> -->
        </div>
        <div class="uhi-rigth">
          <div class="uhir-1">{{ userInfo.account }}</div>
          <van-icon class="uhir-2" name="edit" @click="updateName" />
        </div>
      </div>
      <van-row class="user-header-tools">
        <van-col span="6" @click="goToCollection">
          <div>{{ userInfo.collectionNumber }}</div>
          <div>收藏</div>
        </van-col>
        <van-col span="6" @click="goToLike">
          <div>{{ userInfo.likeNumber }}</div>
          <div>关注</div>
        </van-col>
        <van-col span="6" @click="goToScore">
          <div>{{ userInfo.score }}</div>
          <div>积分</div>
        </van-col>
        <van-col span="6" @click="goToCoupon">
          <div>{{ userInfo.couponNumber }}</div>
          <div>优惠券</div>
        </van-col>
      </van-row>
    </div>
    <!-- consult 资讯 查询    patient 患者 -->
    <div class="user-consult" v-if="userInfo.consultationInfo?.length === 0">
      <van-swipe class="my-swipe" indicator-color="#16c2a3">
        <van-swipe-item v-for="item in 5" :key="item">
          <div style="margin-bottom: 8px">问诊中</div>
          <doctor-info />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="user-order">
      <div class="user-order-top">
        <div>药品订单</div>
        <div @click="goToOrder">
          <span>全部订单</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 布局组件，任何ui框架都有， 24列栅格系统 -->
      <!-- 一般图标的右上角的数字，都是 徽章 badge -->
      <van-row class="user-order-bottom">
        <van-col span="6">
          <div>
            <van-badge :content="userInfo.orderInfo?.paidNumber" max="99">
              <cp-icon name="user-paid" />
            </van-badge>
          </div>
          <div>待付款</div>
        </van-col>
        <van-col span="6">
          <div>
            <van-badge :content="userInfo.orderInfo?.receivedNumber" max="99">
              <cp-icon name="user-shipped" />
            </van-badge>
          </div>
          <div>待发货</div>
        </van-col>
        <van-col span="6">
          <div>
            <van-badge :content="userInfo.orderInfo?.shippedNumber" max="99">
              <cp-icon name="user-received" />
            </van-badge>
          </div>
          <div>待收货</div>
        </van-col>
        <van-col span="6" :content="userInfo.orderInfo?.finishedNumber" max="99">
          <div>
            <cp-icon name="user-finished" />
          </div>
          <div>已完成</div>
        </van-col>
      </van-row>
    </div>
    <div class="user-tools">
      <div class="user-tools-title">快捷工具</div>
      <div class="user-tools-content">
        <van-cell is-link v-for="(item, index) in toolList" :key="item" @click="goToTools(index)">
          <template #title>
            <cp-icon :name="`user-tool-0${index + 1}`" />
            <span>{{ item }}</span>
          </template>
        </van-cell>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="UserCom">
import { ref } from 'vue'
import { getUserInfoRequest } from '@/services/user'
// 图片也是一个模块，需要通过import导入，才会走vite的编译过程
import userImg from '@/assets/start.png'
import { useRouter } from 'vue-router'

const router = useRouter()
const toolList = ref([
  '我的问诊',
  '我的处方',
  '家庭档案',
  '地址管理',
  '我的评价',
  '官方客服',
  '设置'
])
const userInfo = ref<any>({})

// 发请求， 不要在setup里面直接发， 应该封装成一个函数，在调用函数
const getUserInfo = async () => {
  const res = await getUserInfoRequest()
  userInfo.value = res.data
}
getUserInfo()

// 修改用户名
const updateName = () => {
  // 编程式导航 （声明式导航 <router-link />）
  // this.$router.push
  router.push('/user/updatename')
}
const goToCollection = () => {
  router.push('/user/collection')
}
const goToLike = () => {
  router.push('/user/like')
}
const goToScore = () => {
  router.push('/user/score')
}
const goToCoupon = () => {
  router.push('/user/coupon')
}
const goToOrder = () => {
  router.push('/user/order')
}
const goToTools = (index: number) => {
  if (index === 0) {
    router.push('/user/consult')
  } else if (index === 1) {
    router.push('/user/prescription')
  } else if (index === 2) {
    router.push('/user/family')
  } else if (index === 3) {
    router.push('/user/address')
  } else if (index === 4) {
    router.push('/user/evaluate')
  } else if (index === 5) {
    router.push('/user/contact')
  } else {
    router.push('/user/settings')
  }
}
</script>

<style lang="scss" scoped>
body {
  overflow: hidden;
}
.user {
  width: 100%;
  padding: 0 15px 60px;
  // height: calc(100vh - 50px);
  min-height: calc(100vh - 50px);
  background-color: var(--cp-bg);
  &-header {
    // width: 100%;
    height: 200px;
    // margin 负值辅助我们布局
    margin: 0 -15px 20px;
    // https://www.lingdaima.com/jianbianse/ 去网站上面自己拖动得到渐变色代码
    background: linear-gradient(180deg, rgba(117, 246, 184, 1) 0%, rgba(117, 246, 184, 0.2) 62%);
    &-info {
      padding-top: 50px;
      // background-color: red;
      display: flex;
      margin: 0 15px;
      .uhi-image {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        // background-color: var(--cp-tip);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .uhi-rigth {
        margin-left: 15px;
        .uhir-1 {
          font-size: 18px;
          font-weight: bold;
        }
        .uhir-2 {
          font-size: 16px;
          color: var(--cp-primary);
        }
      }
    }
    &-tools {
      margin-top: 15px;
      .van-col {
        text-align: center;
        // nth-child选择器，可以减少一些类名的定义，减轻css复杂度
        div:nth-child(1) {
          font-size: 22px;
          font-weight: bold;
        }
        div:nth-child(2) {
          font-size: 14px;
        }
      }
    }
  }
  &-consult {
    margin: 15px 0;
    .my-swipe {
      border-radius: 15px;
      box-shadow: 0px 5px 8px 0px rgba(149, 148, 148, 0.3);
    }
    .my-swipe .van-swipe-item {
      padding: 15px 15px 30px;
      color: #000;
      // font-size: 20px;
      // line-height: 150px;
      // text-align: center;
      background-color: #fff;
    }
  }
  &-order {
    // height: 350px;
    border-radius: 15px;
    box-shadow: 0px 5px 8px 0px rgba(149, 148, 148, 0.3);
    background-color: var(--cp-white);
    margin-bottom: 15px;
    padding: 15px;
    &-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        // 阴影有两种，盒子阴影和文字阴影  box-shadow  text-shadow, c3属性，会被postcss的插件， autoprefixer 这个插件自动添加 4种浏览器的前缀 --webkit--这种
        text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
      }
      div:nth-child(2) {
        font-size: 14px;
        color: var(--cp-tip);
      }
    }
    &-bottom {
      .van-col {
        text-align: center;
        div:first-child,
        div:first-child .van-badge__wrapper {
          font-size: 30px;
        }
        div:last-child {
          font-size: 12px;
        }
      }
    }
  }
  &-tools {
    // height: 350px;
    // background-color: aqua;
    margin-bottom: 15px;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0px 5px 8px 0px rgba(149, 148, 148, 0.3);
    &-title {
      font-size: 16px;
      font-weight: bold;
      text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
      margin-bottom: 15px;
    }
    &-content {
      :deep(.van-cell__title) {
        display: flex;
        align-items: center;
        font-size: 24px;
        span {
          // 这里必须再写一个font-size 如不过些，字体会默认继承最近的一个父元素 inherited
          font-size: 16px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
